<template>
  <div class="road-info" >
  <div id="popup" class="ol-popup">
    <el-card style="max-width: 100% ">
      <template #header>
        <div class="card-header">
          <span>路况信息</span>
        </div>
      </template>
      <el-input
        v-model="input"
        style="width: 240px; margin-left: 55%"
        placeholder="Please input"
        @keyup.enter="searchTableData()"
      />
      <el-button plain style="margin-left: 10px" @click="getTableData">
        <el-icon><HelpFilled /></el-icon>
      </el-button>
      <el-dropdown>
        <el-button plain style="margin-left: 0px" >
        <el-icon><Grid /></el-icon>
        <el-icon style="margin-left: 2px"><CaretBottom /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="exportToExcel"><el-icon><Download /></el-icon>Excel</el-dropdown-item>
        </el-dropdown-menu>
      </template>
      </el-dropdown>
    </el-card>
    <a href="#" id="popup-closer" class="ol-popup-closer" @click="closeInfo"></a>
      <el-table
        :data="tableData"
        style="width: 100% ;height: 300px;"
        :header-cell-style="{ background: '#f2f2f2', color: '#333', fontWeight: 'bold' }"
        :cell-style="{ fontSize: '14px' }"
      >
        <el-table-column v-for="(item) in columnData" align="center" :key="item.prop" :prop="item.prop"
				:label="item.label"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div class="btn-group" v-if="!scope.row.operate" >
              <el-button type="success" round size="small" style="margin-left: 2px" @click="handleUpdate(scope.row.id)"
                >通过</el-button
              >
              <el-button type="danger" round size="small" style="margin-left: 2px" @click="handleClose(scope.row.id)"
                >忽略</el-button
              >
            </div>
            <template v-else>
            <span v-if="scope.row.operate" style="color: green; text-align: center">已通过</span>
            <span v-else-if="!scope.row.operate" style="color: red; text-align: center">已忽略</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
  </div>
</div>
</template>

<script setup>
import { ref, onMounted ,reactive} from 'vue'
import axios from 'axios'
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import { storeToRefs } from 'pinia'
import { useCommonStore } from '@/stores/common'
import { HelpFilled,Grid,CaretBottom,Download} from '@element-plus/icons-vue'
const store = useCommonStore()
const { isShowInfo } = storeToRefs(store)
const tableData = ref([])
const input = ref('')
const columnData = ref([
	{ prop: 'name', label: '用户名' },
	{ prop: 'data', label: '事件类型' },
	{ prop: 'adress', label: '事件地址' },
	{ prop: 'building', label: '附近建筑' },
	{ prop: 'time', label: '发生时间' },
	{ prop: 'description', label: '事件描述' },
	])


// 获取数据
const getTableData = () => {
  axios.get('/api/information').then((res) => {
    console.log(res.data.result)
    tableData.value = res.data.result
  })
}
// 关闭
const closeInfo = () => {
  isShowInfo.value = false
}
onMounted(() => {
  getTableData()
})
// 搜索
const searchTableData = () => {
  tableData.value = []
  axios.get('/api/information').then((res) => {
    res.data.result.map((item) => {
      if (item.name.includes(input.value)) {
        tableData.value.push(item)
      }
    })
  })
}
// 添加通过
const handleUpdate = (id) => {
  axios.post('/api/information/update', { id: id }).then((res) => {
    tableData.value = res.data.result
  })
}
// 删除
const handleClose = (id) => {
  axios.post('/api/information/delete', { id: id }).then((res) => {
    console.log(res.data)
    tableData.value = res.data.result
  })
}

// 导出
const exportToExcel = () => {
  
  let newTableData = resetTableData()
  const worksheet = XLSX.utils.json_to_sheet(newTableData);
		const workbook = XLSX.utils.book_new()
		XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  const excelBuffer = XLSX.write(workbook, {
			bookType: 'xlsx',
			type: 'array'
		});
		// 将缓冲区转换为 Blob 并保存为文件
		const data = new Blob([excelBuffer], {
			type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
		});
		FileSaver.saveAs(data, 'tableData.xlsx');
	}
 
	const resetTableData = () => {
		const propToLabelMap = new Map(columnData.value.map(item => [item.prop, item.label]));
		const restructuredTableData = []
		tableData.value.map(row => {
			// 使用映射表创建新对象，其中键为label值，值为原对象的相应prop值
			const newRow = {};
			for (const prop in row) {
				if (row.hasOwnProperty(prop) && propToLabelMap.has(prop)) {
					newRow[propToLabelMap.get(prop)] = row[prop];
				}
			}
			restructuredTableData.push(newRow)
		})
		return restructuredTableData

}
</script>

<style scoped>
.road-info{
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: rgb(40, 44, 52, 0.7);
  overflow: hidden;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 998;
}
.ol-popup {
  width: 55%;
  position: fixed;
  background-color: white;
  border-radius: 10px;
  border: 1px solid #cccccc;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 1000;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
  z-index: 10;
}
.ol-popup-closer:after {
  content: '✖';
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}


</style>
